<template>
	<view class="content">
		<view class="storage_box">
			<!-- header -->
			<Login @getChild="getChild" :giveUrlKey="giveUrlKey" :shareUrlKey="shareUrlKey" :boxId="boxId"></Login>
			<!--  搜索-->
			<view class="search">
				<view class="weui-cells weui-cells_after-title" @click="toSearch">
					<view class="weui-cell weui-cell_input">
						<input class="weui-input" placeholder="请输入...   |   搜索">
						</input>
					</view>
				</view>
				<view class="search-right">
					<text class="icon1 iconfont icon-ditu-dibiao"></text>
					<text>{{region}}</text>
				</view>
			</view>
			<view class="footer">
				<!-- 跳转收纳盒详情 -->
				<view class="footer-left" @click="toListPage">
					<div class="left-top">我的储物箱</div>
					<view class="" v-if="rows">
						<view class="boxmsg" v-if="rows.length<=3">
							<view v-for="(item,index) in rows" :key="index">
								{{item.boxName}}
							</view>
						</view>
						<view class="boxmsg" v-else>
							<view>
								{{rows[0].boxName}}
							</view>
							<view>
								{{rows[1].boxName}}
							</view>
							<view>
								{{rows[2].boxName}}
							</view>
						</view>
					</view>


					<div class="iconBox">
						<div style="line-height: 100rpx;">
							<text>更多</text>
						</div>
						<div>
							<text class="icon2 iconfont icon-inbox-full "></text>
						</div>
					</div>
				</view>
				<view class="footer-right" style="margin-left: 20rpx;">
					<view class="right-top">
						<div style="line-height: 120rpx;">
							在线
						</div>
						<div>
							<text class="icon2 iconfont icon-gouwuche "></text>
						</div>
					</view>
					<navigator url="/pages/newStorageBox/newStorageBox">
						<view class="right-buttom">
							<div>
								<text class="icon2 yellow iconfont icon-ai58 "></text>
							</div>
							<div>
								添加已收纳箱
							</div>
							<view class="" v-if="!rows" style="padding-left: 10rpx;">
								您暂时没有储物箱
							</view>
							<view class="" v-else style="padding-left: 10rpx;">
								您已有{{rows.length}}个储物箱
							</view>
						</view>
					</navigator>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Login from "../../common/login/login.vue"
	import request from "../../utlis/request.js"
	import BaseUrl from "../../utlis/api.js"
	var QQMapWX = require('../../utlis/qqmap-wx-jssdk.js');
	var qqmapsdk;
	export default {
		data() {
			return {
				rows: null,
				boxList: null,
				userInfo: null,
				hasLogin: false,
				list: {
					boxName: "收纳箱一号",
					boximage: "image",
					userId: null
				},
				region: "",
				giveUrlKey: null,
				shareUrlKey: null,
				boxId: null,
				address: null
			}
		},
		components: {
			Login
		},
		onLoad(e) {
			if(e){
				if (e.boxId) {
					this.giveUrlKey = e.giveUrlKey;
					this.shareUrlKey = e.shareUrlKey;
					this.boxId = e.boxId
				}
			}
			
			this.getInfo();
			this.getDataList();
			this.getSite()
			qqmapsdk = new QQMapWX({
				key: 'IYZBZ-E2XR6-VE2SE-MEL4Y-QB5VK-JAFPY'
			});
		},
		onShow: function() {},
		methods: {
			getSite() {
				const that = this
				wx.getLocation({
					type: 'wgs84',
					success(res) {
						const latitude = res.latitude //纬度
						const longitude = res.longitude //经度
						qqmapsdk.reverseGeocoder({
							location: {
								latitude: latitude,
								longitude: longitude
							},
							success: res => {
								if (res.result.address) {
									that.address = res.result.address;
									wx.setStorageSync("address", that.address)
								}
								that.region = res.result.ad_info.district
							}
						});
					}
				})
			},
			showModal() {
				uni.navigateTo({
					url: '/pages/user/user',
				})
			},
			// 登录查询
			getInfo() {
				if (!wx.getStorageSync("userInfo")) {
					const userInfo = wx.getStorageSync("userInfo")
					this.userInfo = userInfo.userInfo
				}
			},
			// 获取收纳箱数据
			getDataList() {
				if (wx.getStorageSync("userId")) {
					const token = wx.getStorageSync('token') || [];
					const userId = wx.getStorageSync('userId');
					this.list.userId = userId
					uni.request({
						url: BaseUrl + "/wx/sbox/box/list?userId=" + userId,
						method: 'GET',
						header: {
							"Authorization": "Bearer " + token,
						},
						data: userId,
						success: (res) => {
							const msg = res.data.msg
							this.rows = res.data.rows
						}
					})
				}
			},
			// 跳转数据详情页面
			toListPage() {
				uni.navigateTo({
					url: '/pages/ListPage/ListPage?params='
				})
			},
			// 去搜索页面
			toSearch() {
				uni.navigateTo({
					url: '/pages/search/search'
				})
			},
			// 获取key值
			getgiveUrlKey() {
				// console.log("赠送")
				const boxId = this.list.boxId
				console.log(boxId)
				const token = wx.getStorageSync('token') || [];
				uni.request({
					url: BaseUrl + "/wx/sbox/box/giveUrlKey?boxId=" + boxId,
					method: 'POST',
					header: {
						"Authorization": "Bearer " + token,
					},
					success: (res) => {
						console.log(res)
						this.giveUrlKey = res.data.msg
					}
				})
			},
			getChild(e) {
				this.rows = e
			},
		}
	}
</script>

<style>
	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-size: 100% 100%;
		box-sizing: border-box;
		padding: 0 40rpx;
		background-color: #c3b18b;
		background-image: url();
		background-size: 100% 100%;
	}

	.storage_box {
		width: 100%;
		height: 100%;
		font-size: 28rpx;

	}

	.storage_header {
		display: flex;
		justify-content: space-between;
	}

	.header-left,
	.header-right {
		width: 50%;
		color: #eee;
		font-size: 30rpx;
	}

	.log {
		display: inline-block;
		width: 100%;
		font-size: 34rpx;
	}

	.iln-box {
		display: inline-block;
		box-sizing: border-box;
		padding-top: 30rpx;
		padding-left: 40rpx;
	}

	.header-right {
		text-align: right;
	}

	.icon {
		font-size: 40rpx;
	}

	.icon1 {
		font-size: 48rpx;
	}

	.icon2 {
		font-size: 80rpx;
		color: #A3A19E;
	}

	.search {
		margin-top: 54rpx;
		height: 120rpx;
		border-radius: 35rpx;
		background-color: #AC9062;
		overflow: hidden;
	}

	.weui-cells {
		display: inline-block;
		width: 392rpx;
		height: 80rpx;
		border: 4rpx solid #ddd;
		border-radius: 10rpx;
		margin: 20rpx;
	}

	.uni-input-placeholder {
		color: #ddd;
	}

	.search-right {
		display: inline-block;
		width: 218rpx;
		height: 120rpx;
		float: right;
		background-color: #ddd;
		border-radius: 35rpx;
		font-size: 42rpx;
	}

	.icon-ditu-dibiao {
		padding-left: 10rpx;
		padding-right: 10rpx;
		color: #ffaa00;
		line-height: 120rpx;
	}

	.footer {
		margin-top: 334rpx;
		height: 460rpx;
		opacity: 0.9;
		display: flex;
		justify-content: space-around;
	}

	.footer-left {
		width: 346rpx;
		height: 100%;
		background-color: #F1EDE4;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;
	}

	.footer-right {
		width: 304rpx;
	}

	.left-top {
		font-size: 36rpx;
		font-weight: 500;

	}

	.weui-input {
		padding-top: 18rpx;
	}

	.boxmsg {
		box-sizing: border-box;
		padding: 6rpx;
		color: #A3A19E;
	}

	.iconBox {
		width: 100%;
		height: 80rpx;
		position: absolute;
		bottom: 60rpx;
		left: 0;
		display: flex;
		justify-content: space-between;
		vertical-align: top;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.right-top {
		width: 100%;
		height: 160rpx;
		background-color: #E7DFCE;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		vertical-align: top;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.yellow {
		color: #FFCF00;
	}

	.right-buttom {
		margin-top: 20rpx;
		height: 280rpx;
		background-color: #A68856;
		border-radius: 20rpx;
	}

	.right-buttom>div:nth-child(2) {
		color: #eee;
		font-weight: 600;
		font-size: 30rpx;
		padding-left: 10rpx;
	}

	.right-buttom>div:nth-child(3) {
		color: #fff;
		font-size: 25rpx;
		padding-left: 10rpx;
	}

	.box {
		display: none;
	}
</style>
